<script setup lang="ts">
import { reactive, ref } from 'vue'
import { showNotify } from 'vant'
import { useStore } from '../store'
import { get, post, put } from '../utils/request'
import { useRoute, useRouter } from 'vue-router'
import { dayjs } from 'element-plus'
const router = useRouter()
const route = useRoute()
const form = reactive({
  id: 0,
  name: '',
  gender: '',
  mobile: '',
  // age: '',
  position: '',
  work: '', // 大学,单位
  wx: '',
  items: []
})

const state = reactive({
  disabled: false, // 提交按钮禁用
  list: [],
  label: ''
})


const store = useStore()
const init = () => {
  get('carnivalBase', {}).then(res => {
    for (let i in res.data.data) {
      state.list[i] = res.data.data[i]
    }
  }).catch(() => {
    alert('加载数据出错了')
  })

  get('carnival', {}).then(res => {
    if (res.data.data) {
      for (let i in res.data.data) {
        if (form[i] == undefined) continue
        form[i] = res.data.data[i]
      }
    }
  }).catch(() => {
  })
  
}

if (!store.getToken) {
  router.push('/auth?url='+encodeURIComponent(location.href))
} else {
  init()
}

// const checkboxRefs = ref([]);
// const toggle = (index) => {
//   checkboxRefs.value[index].toggle();
// }
// const sel = (el,i) => checkboxRefs[i] = el
const chk = (hash) => {
  let h = ''
  if (hash.substr(8, 1) == '1') {
    h = hash.substr(0, 8) + '2'
  } else {
    h = hash.substr(0, 8) + '1'
  }
  let n = form.items.indexOf(h)
  if (n > -1) {
    form.items.splice(n, 1)
  }
}

const save = () => {
  console.log(form);
  
  state.disabled = true
  // 检查数据
  if (!form.name) {
    showNotify('参会人员姓名为必填项');
    state.disabled = false
    return false
  }
  if (!form.gender) {
    showNotify('参会人员性别为必填项');
    state.disabled = false
    return false
  }
  if (!form.mobile) {
    showNotify('参会人员手机号码为必填项');
    state.disabled = false
    return false
  }
  if (!form.wx) {
    for (let i in state.list['0323']) {
      if (state.list['0323'][i].wx && form.items.indexOf(state.list['0323'][i].hash) > -1) {
        showNotify('参会人员微信号码为必填项');
        state.disabled = false
        return false
      }
      for (let i in state.list['0324']) {
      if (state.list['0324'][i].wx && form.items.indexOf(state.list['0324'][i].hash) > -1) {
        showNotify('参会人员微信号码为必填项');
        state.disabled = false
        return false
      }
    }
    }
  }

  // 提交
  if (form.id) {
    put(
      'carnival',
      form
    ).then(res => {
      alert('修改成功')
      location.href = 'http://h5.fortrip.cn/form/#/carnival'
      // router.push('/carnival')
    }).catch(err => {
      alert(err.response.data.msg)
    })
  } else {
    post(
      'carnival',
      form
    ).then(res => {
      alert('提交成功')
      location.href = 'http://h5.fortrip.cn/form/#/carnival'
      // router.push('/carnival')
    }).catch(err => {
      alert(err.response.data.msg)
    })
  }
}
document.title = "日本嘉年华"
</script>

<template>
  <div style="min-height: 100vh;background:#eee">
    <!-- <van-nav-bar title="我的报名" /> -->
    <van-image style="width: 100%" src="./images/carnival.jpg" />
    <div style="text-align: justify;margin: 10px 20px 0 20px;font-size: 15px;">
      “日本嘉年华青岛”活动旨在通过各种人文交流项目，促进中日之间的相互理解。活动现场将开展各种参与型主题活动，同时配置企业出展摊位和餐饮摊位，欢迎大家前来参与交流。部分活动采用提前预约制，有人数限制，额满将截止报名，欢迎提前预约您感兴趣的项目。个别主题时间重合，只能选择其中一项参加，报名时请留意活动具体时间。
    </div>

    <h2 class="van-doc-demo-block__title">个人信息</h2>
    <van-cell-group inset>
      <van-field v-model="form.name" label="姓名" />
      <van-cell title="性别" clickable>
        <template #right-icon>
        <van-radio-group v-model="form.gender" direction="horizontal">
          <van-radio name="男">男</van-radio>
          <van-radio name="女">女</van-radio>
        </van-radio-group></template>
      </van-cell>
      <!-- <van-field v-model="form.age" label="年龄" /> -->
      <van-cell title="身份" clickable>
          <template #right-icon>
        <van-radio-group v-model="form.position" direction="horizontal">
          <van-radio name="学生">学生</van-radio>
          <van-radio name="职员">职员</van-radio>
        </van-radio-group>
      </template>
      </van-cell>
      <van-field v-show="form.position=='学生'" v-model="form.work" label="就读大学" />
      <van-field v-show="form.position=='职员'" v-model="form.work" label="就职公司" />
      <van-field v-model="form.mobile" label="电话" type="tel" />
    </van-cell-group>

    <van-checkbox-group v-model="form.items">
      <h2 class="van-doc-demo-block__title">3月23日(周六)</h2>
      <van-cell-group inset>
        <van-cell v-for="(item,i) in state.list['0323']" :key="item.hash" :title="item.title" :label="item.label">
          <template #right-icon>
            <van-checkbox
              :name="item.hash"
              @click.stop
              :disabled="item['surplus']<=0"
              @click="chk(item.hash)"
            />
          </template>
          <template #label>
            <div v-html="item.label"></div>
            <van-field v-if="item.wx && form.items.indexOf(item.hash)> -1" v-model="form.wx" label="微信号" placeholder="微信号" />
          </template>
        </van-cell>
      </van-cell-group>
      <h2 class="van-doc-demo-block__title">3月24日(周日)</h2>
      <van-cell-group inset>
        <van-cell v-for="(item,i) in state.list['0324']" :key="item.hash" :title="item.title">
          <template #right-icon>
            <van-checkbox
              :name="item.hash"
              @click.stop
              :disabled="item['surplus']<=0"
              @click="chk(item.hash)"
            />
          </template>
          <template #label>
            <div v-html="item.label"></div>
            <van-field v-if="item.wx && form.items.indexOf(item.hash)> -1" v-model="form.wx" label="微信号" placeholder="微信号" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>

    <div style="padding: 10px 20px;">
      <van-button type="primary" block @click="save" :disabled="state.disabled">确定</van-button>
    </div>

  </div>

</template>

<style scoped>
.van-doc-demo-block__title {
  margin: 0;
  padding: 32px 16px 16px;
  color: var(--van-doc-text-color-4);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}
</style>